<div class="clue" style="color: red; padding: 0px 0px 10px 0px;">
    【操作提示】修改完成后，请点击“保存列表”按钮。<br/>
    【操作提示】一个银行只允许录入一条数据。
</div>

<!--列表-->
<table class="am-table am-table-bordered am-table-radius am-table-striped am-table-compact">
    <thead>
        <tr>
            <th>银行名称</th>
            <th>开户名</th>
            <th>银行账号</th>
            <th width="130px">支付地址</th>
            <th>最低限额</th>
            <th>最高限额</th>
            <th>状态</th>
            <th width="80px">操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<div style="text-align: center; margin-bottom: 20px;">
    <button class="am-btn am-btn-primary btn-add">新增</button>
    <button class="am-btn am-btn-primary btn-save">保存列表</button>
</div>

<script>
    var charges = {};
    GroupUtil.init(false, function() {
        charges = GroupUtil.queryChargeTypes(true);
        var data = charges.bank;
        if (!data) {
            charges.bank = [];
            return;
        }
        fillBanks();
    });

    // 生成银行列表
    function genBankList() {
        var td = $("<td></td>");
        var s = $("<select data-am-selected class='bank'></select>");
        var arr = Util.banks;
        for (var i in arr) {
            s.append('<option value="' + arr[i].name + '">' + arr[i].name + '</option>');
        }
        td.append(s);
        return td;
    }

    function fillBanks() {
        var banks = charges.bank;
        var table = $(".am-table tbody");
        table.empty();
        for (var i in banks) {
            var tr = $("<tr></tr>");
            tr.append(genBankList());
            tr.append('<td><input type="text" class="am-form-field name" placeholder="输入真实姓名"/></td>');
            tr.append('<td><input type="text" class="am-form-field account" placeholder="输入银行账号"/></td>');
            tr.append('<td><input type="text" class="am-form-field addr" placeholder="输入开户银行地址"/></td>');
            tr.append('<td><input type="number" class="am-form-field min" placeholder="输入最低充值限额"/></td>');
            tr.append('<td><input type="number" class="am-form-field max" placeholder="输入最高充值限额"/></td>');
            tr.append('<td><label class="am-checkbox"><input type="checkbox" class="enable" value="" data-am-ucheck> 启用</label></td>');
            tr.append('<td><a href="#" value="' + i + '">删除</a></td>');
            table.append(tr);
        }

        var blist = $("select.bank");
        var names = $(".am-table input.name");
        var accounts = $(".am-table input.account");
        var addrs = $(".am-table input.addr");
        var enables = $("input.enable");
        var mins = $("input.min");
        var maxs = $("input.max");
        for (var i in banks) {
            $(names[i]).val(banks[i].name);
            $(accounts[i]).val(banks[i].account);
            $(addrs[i]).val(banks[i].addr);
            
            $(blist[i]).val(banks[i].bank);
            $(blist[i]).trigger('changed.selected.amui');

            if (banks[i].enable == 1) $(enables[i]).uCheck('check');
            else $(enables[i]).uCheck('uncheck');

            $(mins[i]).val(banks[i].min || 0);
            $(maxs[i]).val(banks[i].max || 0);
        }

        $(".am-table a").click(function(e) {
            var i = $(e.currentTarget).attr("value");
            banks.splice(i, 1);
            fillBanks();
        });
    }

    $(".btn-add").click(function() {
        charges.bank.push({
            bank: "中国工商银行",
            account: "",
            name: "",
            enable: 1,
        });
        fillBanks();
    });

    $(".btn-save").click(function() {
        // 回写数据
        var banks = charges.bank;
        var names = $(".am-table input.name");
        var accounts = $(".am-table input.account");
        var enables = $("input.enable");
        var blist = $("select.bank");
        var addrs = $(".am-table input.addr");
        var mins = $("input.min");
        var maxs = $("input.max");
        for (var i in banks) {
            banks[i].name = $(names[i]).val();
            banks[i].account = $(accounts[i]).val();
            banks[i].addr = $(addrs[i]).val();
            banks[i].bank = $(blist[i]).val();
            banks[i].min = $(mins[i]).val();
            banks[i].max = $(maxs[i]).val();
            if (enables[i].checked) banks[i].enable = 1;
            else banks[i].enable = 0;
        }

        startLoading();
        CMD.modify_group(GroupUtil.group.id, {
            charges: JSON.stringify(charges),
        }, function() {
            stopLoading();
            alert2("保存成功。");
        });
    });
</script>